<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>处方 - 萌迹(Cute Trail Admin)后台管理系统</title>
<link rel="icon" href="petvet.ico" type="image/ico">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid m-t-15">
  
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>处方管理 - 宠物医院系统</title>
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #f8f9fc;
            --success-color: #1cc88a;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fc;
        }
        
        .prescription-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e3e6f0;
        }
        
        .header h1 {
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .search-filter {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .search-box {
            flex: 1;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 10px 15px 10px 40px;
            border: 1px solid #d1d3e2;
            border-radius: 5px;
            background-color: white;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 12px;
            color: #b7b9cc;
        }
        
        .filter-btn {
            background-color: white;
            border: 1px solid #d1d3e2;
            border-radius: 5px;
            padding: 0 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            color: #6e707e;
        }
        
        .new-prescription-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            font-weight: 500;
        }
        
        .prescription-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }
        
        .prescription-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            overflow: hidden;
            transition: transform 0.3s;
        }
        
        .prescription-card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background-color: var(--secondary-color);
            padding: 15px 20px;
            border-bottom: 1px solid #e3e6f0;
            display: flex;
            justify-content: space-between;
        }
        
        .prescription-id {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .prescription-status {
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: #fcefe9;
            color: #e74a3b;
        }
        
        .status-completed {
            background-color: #eaf7f0;
            color: #1cc88a;
        }
        
        .status-processing {
            background-color: #fbf6e9;
            color: #f6c23e;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .pet-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .pet-avatar {
            width: 50px;
            height: 50px;
            background-color: #e6e8f0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 24px;
        }
        
        .pet-details h4 {
            margin: 0;
            font-weight: 600;
        }
        
        .pet-details p {
            margin: 3px 0 0;
            color: #6e707e;
            font-size: 14px;
        }
        
        .prescription-details {
            margin: 20px 0;
        }
        
        .detail-row {
            display: flex;
            margin-bottom: 10px;
        }
        
        .detail-label {
            width: 100px;
            color: #858796;
            font-size: 14px;
        }
        
        .detail-value {
            flex: 1;
            font-weight: 500;
        }
        
        .medication-list {
            margin-top: 15px;
            border-top: 1px dashed #e3e6f0;
            padding-top: 15px;
        }
        
        .medication-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f8f9fc;
        }
        
        .medication-name {
            font-weight: 500;
        }
        
        .medication-dosage {
            color: #6e707e;
            font-size: 14px;
        }
        
        .card-footer {
            padding: 15px 20px;
            background-color: var(--secondary-color);
            border-top: 1px solid #e3e6f0;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .action-btn {
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .print-btn {
            background-color: white;
            border: 1px solid #d1d3e2;
            color: #6e707e;
        }
        
        .edit-btn {
            background-color: var(--primary-color);
            border: 1px solid var(--primary-color);
            color: white;
        }
        
        .action-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .prescription-cards {
                grid-template-columns: 1fr;
            }
            
            .search-filter {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="prescription-container">
        <div class="header">
            <h1>处方管理</h1>
            <button class="new-prescription-btn">+ 新建处方</button>
        </div>
        
        <div class="search-filter">
            <div class="search-box">
                <i class="bi bi-search"></i>
                <input type="text" placeholder="搜索宠物名称、主人或处方号...">
            </div>
            <button class="filter-btn">
                <i class="bi bi-funnel"></i>
                <span>筛选</span>
            </button>
        </div>
        
        <div class="prescription-cards">
            <!-- 处方卡片1 -->
            <div class="prescription-card">
                <div class="card-header">
                    <span class="prescription-id">RX-20231015-001</span>
                    <span class="prescription-status status-completed">已完成</span>
                </div>
                <div class="card-body">
                    <div class="pet-info">
                        <div class="pet-avatar">🐶</div>
                        <div class="pet-details">
                            <h4>豆豆 (泰迪犬)</h4>
                            <p>主人: 王女士 | 年龄: 3岁</p>
                        </div>
                    </div>
                    
                    <div class="prescription-details">
                        <div class="detail-row">
                            <span class="detail-label">就诊日期</span>
                            <span class="detail-value">2023-10-15</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">主治医生</span>
                            <span class="detail-value">张医生</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">诊断结果</span>
                            <span class="detail-value">肠胃炎</span>
                        </div>
                    </div>
                    
                    <div class="medication-list">
                        <h6>处方药品</h6>
                        <div class="medication-item">
                            <div>
                                <div class="medication-name">宠物用阿莫西林</div>
                                <div class="medication-dosage">50mg/片 × 7天</div>
                            </div>
                            <div>2盒</div>
                        </div>
                        <div class="medication-item">
                            <div>
                                <div class="medication-name">益生菌粉剂</div>
                                <div class="medication-dosage">每日1次，每次1包</div>
                            </div>
                            <div>7包</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="action-btn print-btn">打印</button>
                    <button class="action-btn edit-btn">编辑</button>
                </div>
            </div>
            
            <!-- 处方卡片2 -->
            <div class="prescription-card">
                <div class="card-header">
                    <span class="prescription-id">RX-20231016-002</span>
                    <span class="prescription-status status-processing">处理中</span>
                </div>
                <div class="card-body">
                    <div class="pet-info">
                        <div class="pet-avatar">🐱</div>
                        <div class="pet-details">
                            <h4>球球 (布偶猫)</h4>
                            <p>主人: 张先生 | 年龄: 2岁</p>
                        </div>
                    </div>
                    
                    <div class="prescription-details">
                        <div class="detail-row">
                            <span class="detail-label">就诊日期</span>
                            <span class="detail-value">2023-10-16</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">主治医生</span>
                            <span class="detail-value">李医生</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">诊断结果</span>
                            <span class="detail-value">皮肤过敏</span>
                        </div>
                    </div>
                    
                    <div class="medication-list">
                        <h6>处方药品</h6>
                        <div class="medication-item">
                            <div>
                                <div class="medication-name">抗过敏药片</div>
                                <div class="medication-dosage">10mg/片 × 5天</div>
                            </div>
                            <div>1盒</div>
                        </div>
                        <div class="medication-item">
                            <div>
                                <div class="medication-name">外用喷雾</div>
                                <div class="medication-dosage">每日2次</div>
                            </div>
                            <div>1瓶</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="action-btn print-btn">打印</button>
                    <button class="action-btn edit-btn">编辑</button>
                </div>
            </div>
            
            <!-- 处方卡片3 -->
            <div class="prescription-card">
                <div class="card-header">
                    <span class="prescription-id">RX-20231017-003</span>
                    <span class="prescription-status status-pending">待配药</span>
                </div>
                <div class="card-body">
                    <div class="pet-info">
                        <div class="pet-avatar">🐰</div>
                        <div class="pet-details">
                            <h4>小白 (垂耳兔)</h4>
                            <p>主人: 刘女士 | 年龄: 1岁</p>
                        </div>
                    </div>
                    
                    <div class="prescription-details">
                        <div class="detail-row">
                            <span class="detail-label">就诊日期</span>
                            <span class="detail-value">2023-10-17</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">主治医生</span>
                            <span class="detail-value">王医生</span>
                        </div>
                        <div class="detail-row">
                            <span class="detail-label">诊断结果</span>
                            <span class="detail-value">牙齿过长</span>
                        </div>
                    </div>
                    
                    <div class="medication-list">
                        <h6>处方药品</h6>
                        <div class="medication-item">
                            <div>
                                <div class="medication-name">止痛药</div>
                                <div class="medication-dosage">5mg/片 × 3天</div>
                            </div>
                            <div>1盒</div>
                        </div>
                        <div class="medication-item">
                            <div>
                                <div class="medication-name">草粉</div>
                                <div class="medication-dosage">每日3次，每次5g</div>
                            </div>
                            <div>2包</div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button class="action-btn print-btn">打印</button>
                    <button class="action-btn edit-btn">编辑</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    
    <!-- JavaScript 功能 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 打印按钮功能
            document.querySelectorAll('.print-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const prescriptionId = this.closest('.prescription-card').querySelector('.prescription-id').textContent;
                    alert(`正在打印处方: ${prescriptionId}`);
                    // 实际项目中这里可以调用打印API或打开打印预览
                });
            });
            
            // 编辑按钮功能
            document.querySelectorAll('.edit-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const prescriptionId = this.closest('.prescription-card').querySelector('.prescription-id').textContent;
                    alert(`编辑处方: ${prescriptionId}`);
                    // 实际项目中这里可以跳转到编辑页面或打开编辑模态框
                });
            });
            
            // 新建处方按钮
            document.querySelector('.new-prescription-btn').addEventListener('click', function() {
                alert('创建新处方');
                // 实际项目中这里可以跳转到新建页面
            });
            
            // 搜索功能
            const searchInput = document.querySelector('.search-box input');
            searchInput.addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchTerm = this.value.toLowerCase();
                    filterPrescriptions(searchTerm);
                }
            });
            
            // 筛选功能
            function filterPrescriptions(searchTerm = '') {
                const cards = document.querySelectorAll('.prescription-card');
                
                cards.forEach(card => {
                    const petName = card.querySelector('.pet-details h4').textContent.toLowerCase();
                    const ownerName = card.querySelector('.pet-details p').textContent.toLowerCase();
                    const prescriptionId = card.querySelector('.prescription-id').textContent.toLowerCase();
                    
                    const matchesSearch = searchTerm === '' || 
                                        petName.includes(searchTerm) || 
                                        ownerName.includes(searchTerm) || 
                                        prescriptionId.includes(searchTerm);
                    
                    card.style.display = matchesSearch ? 'block' : 'none';
                });
            }
        });
    </script>
</body>
</html>